<template>
  <transition>
    <div class="app-grabsheet-details">

      <section class="app-main" style="padding: 0;">
        <mt-swipe :auto="4000" class="pic-car" v-if="picCar.length>0">
          <mt-swipe-item v-for="(item,index) in picCar">
            <img :src="item.src" @click="handleCheckPic('0',index)">
          </mt-swipe-item>
        </mt-swipe>
        <div class="module-height"></div>
        <dl class="module-block ">
          <dt class="block-header">服务内容</dt>
          <dd class="word-content word-info" v-html="res.remark"></dd>
        </dl>
        <dl class="module-block" v-if="res.comments">
          <dt class="block-header">备注信息</dt>
          <dd class="word-content word-info" v-html="res.comments"></dd>
        </dl>
        <dl class="module-block">
          <dt class="block-header">订单信息<span class="item-state text-red" v-text="res.storeAllotStatusDesc"></span></dt>
          <dd class="word-content">客户名称：<span v-text="res.applyCustomName"></span><span><template v-if="res.applyCustomDesc">({{res.applyCustomDesc}})</template></span></dd>
          <dd class="word-content">报&nbsp; 案&nbsp; 号：<span v-text="res.insureNumber"></span></dd>
          <dd class="word-content">车&nbsp; 牌&nbsp; 号：<span v-text="res.carNo"></span></dd>
          <dd class="word-content">自&nbsp; 编&nbsp; 号：<span v-text="res.selfNumber"></span></dd>
          <dd class="word-content">车&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型：<span v-text="res.carModel"></span></dd>
          <dd class="word-content">工&nbsp; 单&nbsp; 号：<span v-text="res.sn"></span></dd>
          <dd class="word-content">提交时间：<span v-text="res.createDate"></span></dd>
        </dl>
        <dl class="module-block">

          <dd class="word-content" v-if="res.serviceTime">预约时间：<span>{{res.serviceTime}} {{res.serviceTimeRange}}</span></dd>
          <dd class="word-content" v-if="res.allotStatus!==1 && res.linkMan">联 系 人：<span>{{res.linkMan}}&nbsp;&nbsp;<a :href="'tel:' + res.linkPhone">{{res.linkPhone}}</a></span></dd>
          <dd class="word-content word-content-address">
            <div class="item-left">作业地点：</div>
          <span class="item-right" v-if="res.xAxis">
            <span class="item-address" @click="handleNavigation">{{res.address}}</span>
            <span class="item-action">
            <span class="iconfont icon-didian1" @click="handleNavigation"></span>
              </span>
          </span>
          <span class="item-right" v-else>
            <span class="item-address">{{res.address}}</span>
          </span>
          </dd>
        </dl>

        <dl class="module-block module-block-price" v-if="res.allotStatus!==3 && res.demandType!=2">
          <dt class="block-header">报价明细
          <span v-if="res.needPay==true && res.finishOffer==true">
          <template v-if="payStatus==0">
            <mt-button v-if="res.storeAllotStatus==2 || res.storeAllotStatus==3 || res.storeAllotStatus==4" class="button-pay" type="primary" @click="handleToSelectPay">立即支付</mt-button>
          </template>
          <template v-else>
            <span class="pay-tips text-red">已付款</span>
          </template>
          </span>
          </dt>
          <dd class="word-content" v-for="item in res.parts">{{item.name}}<template v-if="item.partTypeDesc">({{item.partTypeDesc}})</template>：<span class="text-red text-price">￥{{item.amount}}</span></dd>
          <dd class="word-content" v-for="item in res.items">{{item.name}}<template v-if="item.partTypeDesc">({{item.partTypeDesc}})</template>：<span class="text-red text-price">￥{{item.amount}}</span></dd>

          <dd class="word-content">合&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;计：<span class="text-red text-price">￥{{res.totalAmt}}</span></dd>
        </dl>
        <dl class="module-block module-block-price" v-if="res.allotStatus!==3 && res.demandType==2">
          <dt class="block-header">报价明细
          </dt>
          <dd class="word-content" v-for="item in res.parts" v-if="item.isChoose==1">{{item.remark}}<template v-if="item.partTypeDesc">({{item.partTypeDesc}})</template>：<span class="text-red text-price">￥{{item.amount}}</span></dd>

          <dd class="word-content">合&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;计：<span class="text-red text-price">￥{{res.totalAmt}}</span></dd>
        </dl>
      </section>

      <div class="button-grabsheet" @click="handleGrabsheet">抢单</div>
      <!--图片大图弹窗-->
      <mt-popup
        v-model="popupSwiper"
        position="middle" class="me-popup me-popup-pic" @click.native="handleCloseSwiper">
        <mt-swipe class="swiper-pic" :auto="0" v-if="picList.length>0" :defaultIndex="picIndex">
          <mt-swipe-item v-for="(item,index) in picList">
            <div class="item-content">
              <img class="img" :src="item.src"/>
            </div>
            <span class="item-title">{{index+1}}/{{picList.length}}　{{item.fileLocate}}</span>
          </mt-swipe-item>
        </mt-swipe>
      </mt-popup>
      <!--图片大图弹窗-->

      <!--地图弹窗-->
      <mt-popup
        v-model="popupMap"
        position="right" class="popup-map">
        <map-select @mapData="getMapData" @mapClose="handleMapClose"></map-select>
      </mt-popup>
      <!--地图弹窗-->

    </div>
  </transition>
</template>

<script>
  import { Navbar,Button,MessageBox,Toast ,Checklist,Indicator} from 'mint-ui';
  import mapSelect from '../common/map-select';
  export default {
    components:{
      mapSelect
    },
    data () {
      return {
        payStatus:'',
        popupSwiper:false,
        picList:[],
        res:'',
        shopKeeper:'',
        picCar:[],
        picRepair:[],
        popupMap:false,
      }
    },
    beforeRouteEnter (to, from, next) {
      var u = navigator.userAgent;
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      // XXX: 修复iOS版微信HTML5 History兼容性问题
      if (isiOS && to.path !== location.pathname) {
        // 此处不可使用location.replace
        location.assign(to.fullPath)
      } else {
        next()
      }
    },
    beforeRouteLeave (to, from , next) {
      if(this.goStateId!==''){
        from.query.stateId=this.goStateId;
      }
      next();
    },
    mounted(){

      sessionStorage.setItem('goStateId',this.$route.query.stateId); // 存入一个值

      this.$axios({
        method: 'post',
        url:'gp/bu/login!userInfo.do',
      }).then((res)=>{
        if(res.data.result==true){
        if(res.data.object.isAdmin=='0101' || res.data.object.isShopKeeper=='0101'){
          this.shopKeeper=1;
        }else{
          this.shopKeeper=0;
        }
      }
    });

      this.getData();


    },
    methods:{
      /**获取详情**/
      getData(){

        var params = new URLSearchParams();
        params.append('form.demandId',this.$route.query.id);
        params.append('businessType',1);
        this.$axios({
          method: 'post',
          url:'gp/bu/serviceDemandApp!demandDetail.do',
          data:params
        }).then((res)=>{
//        if(res.data.statusCode==200){

          if(res.data.result==false){
          Indicator.open({
            text: res.data.message,
            spinnerType: 'fading-circle'
          });
          return false;
        }
        this.res=res.data.object;
        this.payStatus=this.res.payStatus
        if(this.res.notes!==undefined){
          this.selectNote = this.res.notes.split('、');
        }

        this.picCar=[];
        this.picRepair=[];
        for(var i=0;i<this.res.uploads.length;i++){
          if(this.res.uploads[i].fileType==1){
            this.picArr.push(this.res.uploads[i]);
          }
          if(this.res.uploads[i].fileType==0){
            const picItem = {src: 'https://rmcbapp.oss-cn-shenzhen.aliyuncs.com/'+this.res.uploads[i].ossPath+'?x-oss-process=image/resize,h_320',
            }
            this.picCar.push(picItem)
          }else if(this.res.uploads[i].fileType==1){
            const picItem = {src: 'https://rmcbapp.oss-cn-shenzhen.aliyuncs.com/'+this.res.uploads[i].ossPath+'?x-oss-process=image/resize,h_320',
            }
            this.picRepair.push(picItem)
          }
        }
        var regx = /(1[3|4|5|7|8][\d]{9}|0[\d]{2,3}-[\d]{7,8}|400[-]?[\d]{3}[-]?[\d]{4})/g;
        var regxZj = /0\d{2,3}\d{7,8}/;
        var str = this.res.remark;

        var strresult = matchPhoneNum(str,regx);
        this.res.remark=strresult;
        function matchPhoneNum(str,regx){
          var phoneNums1 = str.match(regx);
          var phoneNums2 = str.match(regxZj);
          if(phoneNums1==null){
            return str;
          }
          var phoneNums = phoneNums1.concat(phoneNums2);
          console.log(phoneNums,1111)
          if(phoneNums==null){
            return str;
          }
          for(var i=0;i<phoneNums.length;i++){
            console.log(phoneNums[i])
            var newPhone='<a href="tel:'+phoneNums[i]+'">'+phoneNums[i]+'</a>';
            str = str.replace(phoneNums[i],newPhone)
          }
          return str;
        };
//      }
      });
      },

      /** 查看图片 **/
      handleCheckPic(fileType,idx){
        this.picIndex=idx;
        this.picList=[];
        for(var i=0;i<this.res.uploads.length;i++){

          if(this.res.uploads[i].fileType==fileType){
            const picItem = {src: 'https://rmcbapp.oss-cn-shenzhen.aliyuncs.com/'+this.res.uploads[i].ossPath+'?x-oss-process=image/resize,h_650',
            }
            this.picList.push(picItem)
          }
        }
        this.popupSwiper=true;
      },
      /** 关闭图片轮转弹窗**/
      handleCloseSwiper(){
        this.popupSwiper=false;

        setTimeout(()=>{
          this.picList=[];
      },500)

      },

      /** 管理员确认提交备注 **/

      handleNavigation(){

        this.$wx.ready(()=>{
          this.$wx.openLocation({
            latitude: parseFloat(this.res.yAxis), // 纬度，浮点数，范围为90 ~ -90
            longitude: parseFloat(this.res.xAxis), // 经度，浮点数，范围为180 ~ -180。
            name: '', // 位置名
            address: this.res.address, // 地址详情说明
            scale: 16, // 地图缩放级别,整形值,范围从1~28。默认为16
            success: (res)=> {},
          error: function(res) {
          if (res.errMsg.indexOf('function_not_exist') > 0) {
            alert('版本过低请升级')
          }
        }
      });
      })
      },

      handleMapClose(){
        this.popupMap=false;
      },
      getMapData(data){
        console.log(data)
        this.form.address=data.address;
        this.form.xAxis=data.xAxis;
        this.form.yAxis=data.yAxis;
        var params = new URLSearchParams();
        params.append('demandSource',this.res.demandSource);
        params.append('demandId',this.res.id);
        params.append('demandData',JSON.stringify(this.form));
        this.$axios({
          method: 'post',
          url:'gp/declaration/sendDemand',
          data:params
        }).then((res)=>{
          if(res.data.statusCode==200){
          Toast({
            message:"修改成功",
            position: 'middle',
            duration: 1200
          });
          this.getData();
        }else{
          Toast({
            message: res.data.message,
            position: 'middle',
            duration: 1500
          });
        }
      });
      },

      /**确认抢单**/
      handleGrabsheet(){

        MessageBox({
          title: '',
          message: '确认是否抢单?',
          showCancelButton: true
        }).then(action => {
          if(action=='confirm'){}
      });
      }
    }
  }
</script>

<style>

  .app-grabsheet-details .me-popup-pic .item-content{
    position: absolute;
    left: 0;
    right: 0;
    top:0;
    bottom: 0;
  }
  .app-grabsheet-details .me-popup-pic  .item-title{
    background:rgba(0,0,0,0.6);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding:12px 0;
    font-size: 16px;
    color: #fff;
  }
  .app-grabsheet-details .me-popup-pic  .mint-swipe-indicators{
    display: none;
  }
  .me-popup{
    width: 100%;
  }
  .app-grabsheet-details .me-popup-pic{
    width: 100%;
    height:100%;
  }
  .me-popup-pic .mint-swipe,.me-popup-pic .mint-swipe-items-wrap{
    height: 100% !important;
  }
  .app-grabsheet-details .me-popup-pic .mint-swipe img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: block;
    max-width: 100%;
    max-height:100%;
  }
  .app-grabsheet-details .icon-close-pic{
    background: #c34853;
    position: absolute;
    top:-24px;
    right:6px;
    z-index:2000;
    width: 48px;
    height: 48px;
    border-radius:50%;
    font-size: 24px;
    color:#fff;
    text-align: center;
    line-height: 48px;
  }
  .me-popup-pic .mint-swipe{
    background: #000;
    height:360px;
    text-align: center;
  }
  .app-grabsheet-details .pic-car{
    background: #fff;
    text-align: center;
  }
  .app-grabsheet-details .pic-car.mint-swipe{
    height:220px;
  }
  .app-grabsheet-details .pic-car.mint-swipe img{
    height:100%;
  }
  .app-grabsheet-details{
    padding:0 0 16px;
  }

  .app-grabsheet-details .module-block{
    margin:0 0 12px;
  }
  .app-grabsheet-details .word-content{
    background: #fff;
    padding:10px 12px;
    font-size: 16px;
    color:#000;
    margin: 0;
    line-height: 24px;
    border-top:1px solid #f5f5f5;
  }
  .app-grabsheet-details .word-content span{
    color:#999;
  }
  .app-grabsheet-details .word-info{
    font-size: 16px;
    line-height:26px;
  }
  .app-grabsheet-details .block-header{
    background-color:#f5f5f5;
    position: relative;
    display: block;
    padding:2px 12px 10px;
    font-size:15px;
    color: #666;
  }
  .app-grabsheet-details .module-block-price .block-header{
    position: relative;
    padding:8px 12px 14px;
  }

  .app-grabsheet-details .block-header .button-pay{
    position: absolute;
    top: 0;
    right:12px;
    font-size: 14px;
    height: 32px;
  }
  .pay-tips{
    float: right;
    font-weight: bold;
  }
  .app-grabsheet-details .item-state{
    padding-right: 10px;
    float: right;
    font-weight: bold;
  }
  .app-grabsheet-details .block-header:before{
    background:#007EE5;
    position: relative;
    top:-2px;
    display:inline-block;
    vertical-align: middle;
    width:2px;
    height:16px;
    content: '';
    margin-right:5px;
  }
  .module-block-price .text-price{
    float: right;
  }
  .mint-toast{
    z-index:100000;
  }
  .app-grabsheet-details .popup-map{
    width: 100%;
    height: 100%;
  }
  .app-grabsheet-details .module-height{
    height: 12px;
  }
  .app-grabsheet-details .button-grabsheet{

    /*background:-webkit-gradient(radial,42 42,10,42 42,42,from(#5bc3ee),to(#3997e1));*/
    background: -webkit-linear-gradient(top, #5bc3ee , #007ee5); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(bottom, #5bc3ee , #007ee5); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(bottom, #5bc3ee , #007ee5); /* Firefox 3.6 - 15 */
    background: linear-gradient(to bottom, #5bc3ee , #007ee5); /* 标准的语法 */
    position: fixed;
    bottom:12px;
    left: 50%;
    width:84px;
    height:84px;
    margin-left:-42px;
    border-radius: 50%;
    color: #fff;
    font-size: 22px;
    letter-spacing: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 8px 6px rgba(0,0,0,0.05);
    /*border:4px solid rgba(255,255,255,0.4);*/
  }
</style>
